<template>
    <el-date-picker class="w-full set-width" v-model="val" :type="item.dateType || 'daterange'"
        :range-separator="item.extra?.seprator || '至'" :start-placeholder="item?.extra?.startPlaceholder || '开始时间'"
        :end-placeholder="item?.extra?.startPlaceholder || '结束时间'" :disabled="item.disabled" :size="size || 'default'"
        :clearable="item?.extra?.clearable ?? true" :format="item?.extra?.format || 'yyyy-MM-dd'"
        :value-format="item?.extra?.format || 'yyyy-MM-dd'" @change="item?.callbacks?.handleChange" />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { PropType } from 'vue'
import type { FormItemDto } from '@/components/form-component/type'

const props = defineProps({
    value: {
        type: Array as PropType<Array<string>>,
    },
    size: {
        type: String as PropType<'large' | 'default' | 'small'>,
        default: 'default'
    },
    item: {
        type: Object as PropType<FormItemDto>,
        required: true
    }
})

const emits = defineEmits(['update:value', 'change'])

const val = ref()

watch(() => props.value, (newval) => {
    val.value = newval
}, {
    immediate: true
})

watch(val, (newval) => {
    emits('update:value', newval)
}, {
    deep: true
})


</script>
<style lang="scss" scoped></style>